<template>
  <div>
    <button @click="flag = !flag">
      {{ flag ? '点击图片消失' : '点击出现图片' }}
    </button>
    <br /><br />
    <div class="prc">
      <img :src="imgUrl" alt="" v-show="flag" />
      <span v-show="!flag">再点一次</span>
    </div><br><br>
    <div class="time">点击修改入职时间 <span class="month">{{num}}月</span></div> <br>
    <button @click="num++">入职时间加一个月</button>  <button @click="num--">入职时间减一个月</button><br><br>
    <p v-if="num === 0">没入职的时候我是垃圾</p>
    <p v-else-if="num < 0">哪有入职时间负数的</p>
    <p v-else-if="num < 3">入职第一个月唯唯诺诺</p>
    <p v-else-if="num < 6">入职三个月无所畏惧</p>
    <p v-else-if="num < 12">入职六个月手到擒来</p>
    <p v-else>入职一年以上，看谁都是菜鸡</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-09-28%2F5f714a326c0ea.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672217973&t=19f4f9b4e075959de8b78b967812608f',
      flag: true,
      num:0
    }
  },
  methods: {},
}
</script>

<style scoped lang="less">
.prc {
  height: 500px;
  img {
    height: 100%;
  }
}
.month{
  background-color: lawngreen;
}
p{
  display: inline;
  background-color: #087;
  color: #fff;
}
</style>
